<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">
<head>
    <meta charset="UTF-8"/>
    <title>Profile Picture Upload</title>
</head>
<body>
<div class="row" layout:fragment="content">
    <h2 class="indigo-text center">Upload</h2>
    <div class="col s12 center red-text" th:text="${error}" th:if="${error}">Error uploading picture</div>
    <div class="col m8 s12 offset-m2">
        <img th:src="@{/uploadedPicture}" width="100" height="100"/>
    </div>
    <form th:action="@{/upload}" method="post" enctype="multipart/form-data" class="col m8 s12 offset-m2">
        <div class="file-field input-field col s6">
            <div class="btn">
                <span>File</span>
                <input type="file" id="file" name="file"/>
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text"/>
            </div>
        </div>
        <div class="col s6 center">
            <button class="btn indigo waves-effect waves-light" type="submit" name="save">submit<i class="material-icons right">send</i> </button>
        </div>
    </form>
</div>
</body>
</html>